<template>
  <div class="visitor-index">
    <a-row class="aRow-wrapper" :gutter="12">
      <a-col class="tree-wrapper" :span="4">
        <left-tree @onSelect="onTreeSelected"></left-tree>
      </a-col>
      <a-col class="listContent-wrapper" :span="20">
        <div class="title-wrapper-box">
          <top-title :updateTime="false" :content="content"></top-title>
          <div v-has="'police:add-btn'" class="add-btn cursor" style="position: unset" @click="handelAdd">+ 新增</div>
        </div>
        <div class="l-w_content">
          <div class="l-w_c_content">
            <div class="pageInfo">
              <div class="tab-info">
                <a-tabs v-model="activeKey" tab-position="left">
                  <a-tab-pane v-for="(item, index) in tabList" :key="index" :tab="item.title"> </a-tab-pane>
                </a-tabs>
              </div>
              <div class="right-content">
                <div v-show="activeKey == 0">
                  <div class="common-title">
                    <div class="icon"></div>
                    <div class="content">爱心关怀小组</div>
                  </div>

                  <a-table
                    rowKey="id"
                    class="wearing-table"
                    :columns="careColumns"
                    :dataSource="wearingPersonnelList"
                    :pagination="false"
                  >
                    <template slot="action" slot-scope="records">
                      <span class="operation deatil-color" @click="handleChange(records)">更换</span>
                    </template>
                  </a-table>
                  <div class="common-title">
                    <div class="icon"></div>
                    <div class="content">行为（发病）记录</div>
                  </div>

                  <a-table
                    rowKey="id"
                    class="wearing-table"
                    :columns="abnormalDataColumns"
                    :dataSource="wearingPersonnelList"
                    :pagination="false"
                  >
                    <template slot="action" slot-scope="records">
                      <span class="operation deatil-color" @click="handleChange(records)">更换</span>
                    </template>
                  </a-table>

                  <div class="common-title">
                    <div class="icon"></div>
                    <div class="content">关怀记录</div>
                  </div>

                  <a-table
                    rowKey="id"
                    class="wearing-table"
                    :columns="careRecordColumns"
                    :dataSource="wearingPersonnelList"
                    :pagination="false"
                  >
                    <template slot="action" slot-scope="records">
                      <span class="operation deatil-color" @click="handleChange(records)">更换</span>
                    </template>
                  </a-table>

                  <div class="common-title">
                    <div class="icon"></div>
                    <div class="content">设备信息</div>
                  </div>

                  <a-table
                    rowKey="id"
                    class="wearing-table"
                    :columns="equipmentColumns"
                    :dataSource="wearingPersonnelList"
                    :pagination="false"
                  >
                    <template slot="action" slot-scope="records">
                      <span class="operation deatil-color" @click="handleChange(records)">更换</span>
                    </template>
                  </a-table>
                </div>

                <div v-show="activeKey == 1">
                  <a-table
                    rowKey="id"
                    class="wearing-table"
                    :columns="careColumns"
                    :dataSource="wearingPersonnelList"
                    :pagination="false"
                  >
                    <template slot="action" slot-scope="records">
                      <span class="operation deatil-color" @click="handleChange(records)">更换</span>
                    </template>
                  </a-table>
                </div>

                <div v-show="activeKey == 2" class="right-inner-box">
                  <div class="button-group">
                    <a-button class="i-btn"> 实时定位 </a-button>
                    <!-- <a-button> 安全围栏设置 </a-button> -->
                    <a-button class="i-btn"> 清除当前电子围栏 </a-button>
                    <a-button class="i-btn" @click="handleStartMouse"> 鼠标绘制点 </a-button>
                    <a-button class="i-btn" @click="handleClearPoint"> 清除所有点 </a-button>
                    <a-button class="i-btn" @click="handleConfirmPoint"> 4个点确定电子围栏 </a-button>
                  </div>
                  <div id="map-box"></div>
                </div>

                <div v-show="activeKey == 3">
                  <CallLogList />
                </div>
              </div>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
    <Add ref="addRef" />
  </div>
</template>

<script>
import leftTree from '@/components/leftTree'
import topTitle from '@/components/topTitle'
import list from './modules/list'
import Add from './modules/add'
import { getCommunityList } from '@/api/api'
import CallLogList from './modules/callLogList'

export default {
  name: 'pringing',
  components: { leftTree, topTitle, list, Add, CallLogList },
  data() {
    return {
      content: [['患者档案'], ['患者详情']],
      activeKey: 0,
      key: '',
      selectedKey: '',
      addRef: null,
      tabList: [
        {
          title: '基础信息',
        },
        {
          title: '关怀小组',
        },
        // {
        //   title: '提醒管理',
        // },
        // {
        //   title: '修改配置',
        // },
        {
          title: '行为记录',
        },
        {
          title: '设备信息',
        },
      ],
      detail: {},

      careColumns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '人员类型',
          align: 'center',
          dataIndex: 'fHjdzQhnxxdz',
        },
        {
          title: '人员姓名',
          align: 'center',
          dataIndex: 'fYfzgx',
          ellipsis: true,
        },
        {
          title: '设为主要负责人',
          align: 'center',
          dataIndex: 'policeAgencyName',
          ellipsis: true,
        },
        {
          title: '身份证号码',
          align: 'center',
          dataIndex: 'policeAgencyName',
          ellipsis: true,
        },
        {
          title: '手机号码',
          align: 'center',
          dataIndex: 'policeAgencyName',
          ellipsis: true,
        },
        {
          title: '备注信息',
          align: 'center',
          dataIndex: 'policeAgencyName',
          ellipsis: true,
        },
        {
          title: '绑定时间',
          align: 'center',
          dataIndex: 'policeAgencyName',
          ellipsis: true,
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          ellipsis: true,
          align: 'center',
          width: 200,
          fixed: 'right',
        },
      ],
      careRecordColumns: [
        {
          title: '社区民警',
          children: [
            {
              title: '姓名',
              dataIndex: 'age',
              key: 'age',
              width: 84,
              align: 'center',
            },
            {
              title: '打卡数',
              dataIndex: 'age',
              key: 'age',
              width: 84,
              align: 'center',
            },
          ],
        },
        {
          title: '监护人',
          children: [
            {
              title: '姓名',
              dataIndex: 'age',
              key: 'age',
              width: 84,
              align: 'center',
            },
            {
              title: '打卡数',
              dataIndex: 'age',
              key: 'age',
              width: 84,
              align: 'center',
            },
          ],
        },
        {
          title: '管控组长',
          children: [
            {
              title: '姓名',
              dataIndex: 'age',
              key: 'age',
              width: 84,
              align: 'center',
            },
            {
              title: '打卡数',
              dataIndex: 'age',
              key: 'age',
              width: 84,
              align: 'center',
            },
          ],
        },
        {
          title: '精防医生',
          children: [
            {
              title: '姓名',
              dataIndex: 'age',
              key: 'age',
              width: 84,
              align: 'center',
            },
            {
              title: '打卡数',
              dataIndex: 'age',
              key: 'age',
              width: 84,
              align: 'center',
            },
          ],
        },
        {
          title: '包村干部',
          children: [
            {
              title: '姓名',
              dataIndex: 'age',
              key: 'age',
              width: 84,
              align: 'center',
            },
            {
              title: '打卡数',
              dataIndex: 'age',
              key: 'age',
              width: 84,
              align: 'center',
            },
          ],
        },
        {
          title: '村组干部',
          children: [
            {
              title: '姓名',
              dataIndex: 'age',
              key: 'age',
              width: 84,
              align: 'center',
            },
            {
              title: '打卡数',
              dataIndex: 'age',
              key: 'age',
              width: 84,
              align: 'center',
            },
          ],
        },
      ],
      wearingPersonnelList: [],
      abnormalDataColumns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '类型',
          align: 'center',
          dataIndex: 'fHjdzQhnxxdz',
        },
        {
          title: '发生时间',
          align: 'center',
          dataIndex: 'fYfzgx',
          ellipsis: true,
        },
        {
          title: '发生地点',
          align: 'center',
          dataIndex: 'policeAgencyName',
          ellipsis: true,
        },
      ],
      careColumns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '人员类型',
          align: 'center',
          dataIndex: 'fHjdzQhnxxdz',
        },
        {
          title: '人员姓名',
          align: 'center',
          dataIndex: 'fYfzgx',
          ellipsis: true,
        },
        {
          title: '身份证号码',
          align: 'center',
          dataIndex: 'policeAgencyName',
          ellipsis: true,
        },
        {
          title: '手机号码',
          align: 'center',
          dataIndex: 'policeAgencyName',
          ellipsis: true,
        },
        {
          title: '设为SOS号 ',
          align: 'center',
          dataIndex: 'policeAgencyName',
          ellipsis: true,
        },
        {
          title: '备注信息',
          align: 'center',
          dataIndex: 'policeAgencyName',
          ellipsis: true,
        },
        {
          title: '添加人',
          align: 'center',
          dataIndex: 'policeAgencyName',
          ellipsis: true,
        },
        {
          title: '添加时间',
          align: 'center',
          dataIndex: 'policeAgencyName',
          ellipsis: true,
        },
      ],
      equipmentColumns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '设备类型',
          align: 'center',
          dataIndex: 'fHjdzQhnxxdz',
        },
        {
          title: '设备IMEI码',
          align: 'center',
          dataIndex: 'fYfzgx',
          ellipsis: true,
        },
        {
          title: '设备状态',
          align: 'center',
          dataIndex: 'policeAgencyName',
          ellipsis: true,
        },
        {
          title: '当前位置',
          align: 'center',
          dataIndex: 'policeAgencyName',
          ellipsis: true,
        },
      ],
      timeType: 'day',
      map: null,
      markerList: [],
      drawing: false,
      ploygonList: [],
    }
  },
  mounted() {
    this.activeKey = this.$route.query.activeKey ? this.$route.query.activeKey : 0

    // this.initMap()
  },
  methods: {
    handelClick(event) {
      this.activeKey = event
      this.searchTableData()
    },
    onTreeSelected(selectedKeys) {
      this.selectedKey = Array.isArray(selectedKeys) ? selectedKeys[0] : ''
      if (this.selectedKey) {
        this.searchTableData()
        this.loadDataWithTree({
          policeAgencyId: this.selectedKey,
        })
      }
    },
    searchTableData() {
      this.$nextTick(() => {
        // 调用各个组件的 search 方法
        this.$refs.listRef.searchQuery()
      })
    },
    handelAdd() {
      this.$refs.addRef.show()
    },
    handleChange() {},
    onChange() {},
    initMap() {
      this.map = new AMap.Map('map-box', {
        resizeEnable: true,
        center: [116.397428, 39.90923],
        zoom: 13,
      })
      this.map.on('click', (e) => {
        const position = [e.lnglat.lng, e.lnglat.lat]
        //如果没有 marker 则添加 ，否则新增
        this.addMarker(this.map, position)
      })
    },
    addMarker(map, position) {
      var marker = new AMap.Marker({
        position: position,
        icon: new AMap.Icon({
          image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
          size: new AMap.Size(25, 34),
          imageSize: new AMap.Size(25, 34), //图标大小
        }),
        anchor: 'bottom-center',
        offset: new AMap.Pixel(0, 0),
      })

      marker.setMap(map)

      // 设置鼠标划过点标记显示的文字提示
      marker.setTitle('我是marker的title')

      // 设置label标签
      // label默认蓝框白底左上角显示，样式className为：amap-marker-label
      marker.setLabel({
        direction: 'top',
        offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
        content: `<div class='info'>点${this.markerList.length + 1}</div>`, //设置文本标注内容
      })

      this.markerList.push(marker)
    },
    // 开启鼠标绘制
    handleStartMouse() {
      this.drawing = true
    },
    // 四个点确定
    handleConfirmPoint() {
      if (this.markerList.length > 4) {
        this.$message.warning('绘制点数量不能超过4个！')
        return
      }
      let ploygonList = this.markerList.map((item) => {
        return item.getPosition()
      })
      this.addPloygon(ploygonList)
    },
    // 清除所有点
    handleClearPoint() {
      this.markerList.forEach((marker) => {
        marker.setMap(null)
      })
      this.markerList = []

      // 顺便移除之前的覆盖物
      this.ploygonList.forEach((ploygonInstance) => {
        this.map.remove(ploygonInstance)
      })
    },

    // 添加覆盖物
    addPloygon(polygonPath) {
      var polygon = new AMap.Polygon({
        path: polygonPath,
      })
      this.ploygonList.push(polygon)
      this.map.add([polygon])
    },
  },
}
</script>
<style lang="less" scoped>
.visitor-index {
  width: 100%;
  height: 100%;
  .pageInfo {
    width: 100%;
    height: 100%;
    display: flex;
    .tab-info {
      width: 160px;
      height: 100%;
      background: var(--theme-container-bg);
      border-radius: 4px 4px 4px 4px;
      padding-top: 23px;
      margin-right: 8px;
      flex-shrink: 0;
      /deep/ .ant-tabs-bar {
        width: 100%;
        border-right: 0;
      }
      /deep/ .ant-tabs-tab-active {
        font-weight: 500 !important;
        font-size: 14px !important;
        color: #ffffff !important;
      }
      /deep/ .ant-tabs-tab {
        text-align: center;
        font-weight: 400;
        font-size: 14px;
        color: #abd5ff;
      }
      /deep/ .ant-tabs-left-bar {
        .ant-tabs-ink-bar {
          width: 0;
        }
      }
    }
    .right-content {
      flex: 1;
      background: var(--theme-container-bg);
      padding: 21px 24px;
      overflow: auto;
      .common-title {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        margin-top: 12px;

        .icon {
          width: 6px;
          height: 6px;
          background: #abd5ff;
          border-radius: 50%;
          margin-right: 7px;
        }
        .content {
          font-weight: 500;
          font-size: 14px;
          color: var(--theme-tab-text-color);
        }
      }

      .wearing-table {
        /deep/.ant-table-thead > tr > th {
          height: 46px;
          background: #0946a8;
          border-radius: 0px 0px 0px 0px;
          border: 1px solid #0855cc;
          font-weight: 500;
          font-size: 14px;
          color: #8fbbff;
          border-right: 0;
          &:last-child {
            border-right: 1px solid #0855cc;
          }
        }
        /deep/ .ant-table-thead {
          border-right: 1px solid #0855cc;
        }
        /deep/ .ant-table-tbody .ant-table-row td {
          background: #07429e;
          border-radius: 0px 0px 0px 0px;
          border: 1px solid #0855cc;
          color: #ffffff;
          border-right: 0;
          border-top: 0;
        }

        /deep/.ant-table-placeholder {
          background-color: var(--theme-container-bg);
          border: 1px solid #0855cc;
          border-top: 0;
          .ant-empty-normal {
            color: #fff;
          }
        }
      }
      .content-wrapper {
        border-top: 1px solid #0855cc;
        border-left: 1px solid #0855cc;

        .info-wrap {
          display: flex;
          align-items: stretch;
          border-bottom: 1px solid #0855cc;
          border-right: 1px solid #0855cc;

          .label {
            background: #0946a8;
            width: 160px;
            padding: 14px 20px;
            font-weight: 500;
            font-size: 14px;
            color: #8fbbff;
            border-right: 1px solid #0855cc;
          }
          .value {
            font-weight: 400;
            font-size: 14px;
            color: #ffffff;
            padding: 14px 20px;
          }
        }
      }

      .time-select {
        display: flex;
        .time-btn-style {
          .ant-radio-button-wrapper {
            background: #06409a;
            border: 1px solid #0855cc;
            font-weight: 500;
            font-size: 14px;
            color: #8fbbff;
            &::before {
              width: 0;
            }
          }
          .ant-radio-button-wrapper-checked {
            background: #1970f6;
            border: 1px solid #1970f6;
          }
        }
        .time-range {
          width: 310px !important;
          margin-left: 8px;
        }
      }
    }
  }
  .title-wrapper-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .l-w_content {
    margin-left: 2px;
  }
  .right-inner-box {
    width: 100%;
    height: 100%;
    position: relative;
    #map-box {
      width: 100%;
      height: 100%;
    }
    .button-group {
      position: absolute;
      right: 10px;
      z-index: 10;
      padding-top: 6px;
      .i-btn {
        margin-right: 6px;
      }
    }
  }
}
</style>
